<template>
  <div class="userMenu">
    <el-main>
      <!-- 搜索框 -->
      <div class="demo-input-suffix">
      <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="keyword" style="width:200px; margin-left: 20px;">
      </el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="getUserByName">搜索</el-button>
     </div>
    <div>
      <!-- 展示列表 -->
      <el-table style="width: 100%" :data="userList" @current-change="getUser">
        <el-table-column  type="index" label="序号" width="220">
        </el-table-column>
        <el-table-column  prop="username" label="姓名" width="220">
        </el-table-column>
        <el-table-column  prop="phone" label="手机号" width="220">
        </el-table-column>
        <el-table-column  prop="balance" label="账户余额" sortable width="180">
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini"  @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination v-show="t>0" :total="t" :page.sync="currentPage" :limit.sync="pageSize" @pagination="getData" />
    </div>
    </el-main>
    <div>
    <user-edit ref="userEdit" @fatherMethod="getData(1,10)"></user-edit>
  </div>
  </div>  
</template>
<script>
import Pagination from '@/components/Header/Pagination.vue' // secondary package based on el-pagination
import userEdit from "./userEdit";
import { mapState } from 'vuex';
export default {

  components:{
    userEdit,
    Pagination
  },
  name:'UserIndex',
  data() {
    return {
      loading:true,
      currentPage: 1,  // 当前页码-默认首页
      pageSize: 10,  // 每页显示的行数
      keyword:'',//搜索框数据
      userId:0,
      total:1,
    }
  },

  
  mounted() {
    //组件挂载完成时调用
    this.getData()
  },
  computed:{
    ...mapState(['userList']),
    t:function(){
      return this.$store.state.t
    }
  },
  methods: {
    //API请求用户数据
    getData(){
      var data = {};
      data.currentPage = this.currentPage
      data.pageSize = this.pageSize
      this.$store.dispatch('getUserInfo',data)
    },
    //搜索按钮筛选数据
    getUserByName(){
      //传递姓名 + 页码
      const params = {username:this.keyword,currentPage:this.currentPage}
      this.$store.dispatch('getUserByName',params)
    },
    getUser(user){
      this.userId = user.userId
    },
    //编辑按钮
    handleEdit(data){
        this.$refs['userEdit'].init(data)
    },
    
    //删除按钮
    handleDelete(){
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: 'Yes',
          cancelButtonText: 'No',
          type: 'warning'
        }).then(() => {
          this.$notify({
                title: "Success",
                message: "删除成功",
                type: "success",
                duration: 2000,
              });
          // 确认后执行删除的操作
          this.$store.dispatch('deleteUser',this.userId)
          //删除数据 再次请求当前页面的数据(刷新数据)
            this.getData(this.currentPage)  
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })       
        })
    }
  }
}
</script>
<style>
.demo-input-suffix{
  width: 100%;
  float: right; 
}
.userMenu{
  margin-left: 250px;
}

</style>
